<!-- 系统状态概览 -->
<template>
  <div class="wrap">
    <span class="title">系统状态概览</span>
    <div class="main">
      <el-row :gutter="3" class="back-hide"> 
        <el-col :span="8"><div class="coldiv left">设备授权</div></el-col>
        <el-col :span="16"><div class="coldiv"><span class="authorize" :title="`${list.CorpName} (${list.CorpUUID})`">{{list.CorpName}} ({{ list.CorpUUID }})</span></div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">授权有效期</div></el-col>
        <el-col :span="16">
          <div class="coldiv">{{list.ValidTime}}
            <span v-if="this.Days > 30" style="margin-left:10px; color:#409EFF;">({{this.Days}}天)</span>
            <span v-if="this.Days <= 30 && this.Days > 7" style="margin-left:10px; color:#E6A23C;">({{this.Days}}天)</span>
            <span v-if="this.Days <= 7 && this.Days > 0" style="margin-left:10px; color:#F56C6C;">({{this.Days}}天)</span>
            <span v-if="this.Days <= 0" style="margin-left:10px; color:#909399;">(已过期)</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8">
          <div class="coldiv left">授权数量</div>
        </el-col>
        <el-col :span="16">
          <div class="coldiv">{{ list.LicenseCount }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8">
          <div class="coldiv left">版本号</div>
        </el-col>
        <el-col :span="16">
          <div class="coldiv">{{ list.Version }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8">
          <div class="coldiv left">有线地址</div>
        </el-col>
        <el-col :span="16">
          <div class="coldiv"><svg-icon :icon-class="list.EthStatus === 1 ? 'wangkaup' : 'wangkadown'"
              style="margin-right:10px;" />{{ list.EthStatus === 1 ? list.EthIP : '未连接' }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8">
          <div class="coldiv left">连续运行</div>
        </el-col>
        <el-col :span="16">
          <div class="coldiv hasprogress">{{ list.KeepRunningSeconds }}<el-button :loading="loading" @click="condition()"
              size="mini" style="margin-left: 20px;">运行状态</el-button></div>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8">
          <div class="coldiv left">设备时间</div>
        </el-col>
        <el-col :span="16">
          <div class="coldiv">{{ list.CurrentTime }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8"><div class="coldiv left">温度</div></el-col>
        <el-col :span="16"><div class="coldiv">{{list.Temperature === 0 ? '--' : list.Temperature + '℃'}}</div></el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8">
          <div class="coldiv left">系统磁盘</div>
        </el-col>
        <el-col :span="16">
          <div class="coldiv hasprogress"><el-progress :stroke-width="10" :percentage="list.DiskUsedPct"></el-progress>{{ list.DiskUsed }}/{{ list.DiskTotal }}</div>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8">
          <div class="coldiv left">CPU使用率</div>
        </el-col>
        <el-col :span="16">
          <div class="coldiv hasprogress"><el-progress :stroke-width="10" :percentage="list.CPURate"></el-progress>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="3">
        <el-col :span="8">
          <div class="coldiv left">内存使用</div>
        </el-col>
        <el-col :span="16">
          <div class="coldiv hasprogress"><el-progress :stroke-width="10" :percentage="list.MemUsedPct"></el-progress>{{
            list.MemUsed }}/{{ list.MemTotal }}</div>
        </el-col>
      </el-row>
    </div>
    <el-dialog v-el-drag-dialog title="引擎状态" :close-on-click-modal="false" :close-on-press-escape="false"
      :visible.sync="dialogTableVisible" width="800px">
      <div style="display: flex; justify-content: space-around; flex-wrap: wrap;">
        <div v-for="(item, index) in runList" :key="index" :data="Colors">
          <svg height="240" style="display: flex; justify-content: center; align-items: center;" width="140">
            <circle cx="50%" cy="25%" r="45" :stroke="Colors[item.show ? 2 : 0].color" stroke-width="3" fill="none" />
            <text x="50%" y="25%" dominant-baseline="middle" text-anchor="middle" :fill="Colors[item.show ? 2 : 0].color"
              letter-spacing="2" v-if="item.show">
              正常
            </text>
            <text x="50%" y="25%" dominant-baseline="middle" text-anchor="middle" :fill="Colors[item.show ? 2 : 0].color"
              letter-spacing="2" v-if="!item.show">
              异常
            </text>
            <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">{{ item.proc }}</text>
            <text x="50%" y="70%" dominant-baseline="middle" text-anchor="middle" fill="grey">{{ item.version }}</text>
            <text x="50%" y="80%" dominant-baseline="middle" text-anchor="middle" fill="grey" v-if="item.mem.length">内存：{{
              item.mem }}</text>
          </svg>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
import { connrequest2 } from '@/api/firstPage.js'
import { formatTime } from '@/utils/index.js'
export default {
  directives: { elDragDialog },
  data() {
    return {
      dialogTableVisible: false,
      loading: false,
      runList: [],
      Colors: [
        { color: '#f56c6c', percentage: 20 },
        { color: '#e6a23c', percentage: 40 },
        { color: '#5cb87a', percentage: 60 },
        { color: '#1989fa', percentage: 80 },
        { color: '#6f7ad3', percentage: 100 }
      ]
    }
  },
  props: {
    list: {},
    Days: ''
  },
  created() { },
  mounted() { },
  methods: {
    dateTrans(date) {
      let computeTime = date / 1000
      let year = Math.floor(computeTime / 86400 / 365);
      computeTime = computeTime % (86400 * 365);
      let month = Math.floor(computeTime / 86400 / 30);
      computeTime = computeTime % (86400 * 30);
      let day = Math.floor(computeTime / 86400);
      computeTime = computeTime % 86400;
      return `${year > 0 ? year + '年' : ''}${month > 0 ? month + '月' : ''}${day}天`;
    },
    async condition() {
      this.loading = true
      this.runList = []
      const res = await connrequest2('GetWatchDog')
      this.loading = false
      if (res.Status.StatusCode === 0) {
        for (const key in res.Data) {
          switch (res.Data[key].proc) {
            case 'agent_guard':
              res.Data[key].proc = '系统守护引擎'
              break;
            case 'agent_rsa':
              res.Data[key].proc = '终端管理引擎'
              break;
            case 'agent_upgrade':
              res.Data[key].proc = '终端升级引擎'
              break;
            case 'agent_dcd':
              res.Data[key].proc = '装置检测引擎'
              break;
            case 'agent_sync_param':
              res.Data[key].proc = '数据同步引擎'
              break;
            case 'uis':
              res.Data[key].proc = '终端界面引擎'
              break;
            case 'autodel':
              res.Data[key].proc = '数据管理引擎'
              break;
            case 'agent_antivirus':
              res.Data[key].proc = '病毒检测引擎'
              break;
            case 'agent_nmap':
              res.Data[key].proc = '资产扫描引擎'
              break;
          }
          res.Data[key].cpu = res.Data[key].cpu + '%'
          res.Data[key].mem = res.Data[key].mem > 1000 ? (res.Data[key].mem / 1000).toFixed(2) + 'M' : res.Data[key].mem + 'K'
          const updateTime = new Date(res.Data[key].update_time);
          const currentTime = new Date();
          if ((currentTime - updateTime) > 180000) {
            res.Data[key].show = false
          } else {
            res.Data[key].show = true
          }
          res.Data[key].update_time = formatTime(new Date(res.Data[key].update_time))
          this.runList.push(res.Data[key])
        }
        this.dialogTableVisible = true;
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.wrap {
  display: flex;
  /* 使用弹性布局 */
  flex-direction: column;
  /* 垂直排列子元素 */
  // height: calc(100% - 8px);
  /* 继承父组件高度 */
  min-height: 200px;
  /* 最小高度以确保内容可见 */
  box-sizing: border-box;
  /* 确保边距不影响高度 */
}

.title {
  flex-shrink: 0;
  /* 防止标题缩小 */
}

::v-deep .main {
  flex: 1;
  /* 占据剩余高度 */
  margin-top: 15px;
  /* 上边距 */
  font-size: 14px;
  /* 字体大小 */
  display: flex;
  /* 使用弹性布局 */
  flex-direction: column;
  /* 垂直排列子元素 */
  // gap: 3px;
  /* 行间距，替代原gutter */

}

::v-deep .el-row {
  display: flex;
  /* 使用弹性布局 */
  flex: 1;
  /* 每行自适应高度 */
  @media (min-width: 1921px) {
    margin-bottom: 3px;
  }
}

::v-deep .el-col {
  display: flex;
  /* 确保子元素自适应 */
  flex-direction: column;
  /* 垂直排列 */
}

::v-deep .coldiv {
  min-height: 28px;
  /* 最小高度以确保内容可见 */
  line-height: 28px;
  /* 行高居中 */
  padding-left: 10px;
  /* 左内边距 */
  border: 1px solid #E6EAEE;
  /* 边框 */
  white-space: nowrap;
  /* 文本不换行 */
  display: flex;
  /* 使用弹性布局 */
  align-items: center;
  /* 垂直居中 */
  flex: 0;
  /* 占据可用高度 */
  @media (min-width: 1921px) {
    min-height: 40px;
    line-height: 40px;
    /* 宽度大于1920px时字体大小为16px */
  }
}
.authorize{
  /* 超出省略号关键属性 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* 可选：限制最大宽度，才能看到省略效果 */
  max-width: 100%; // 或者具体像 200px
}

::v-deep .hasprogress {
  display: flex;
  /* 使用弹性布局 */
  align-items: center;
  /* 垂直居中 */
  justify-content: space-between;
  /* 内容两端对齐 */
  padding-right: 10px;
  /* 右内边距 */
}

::v-deep .el-progress {
  display: inline-block;
  /* 内联块显示 */
  min-width: 120px;
  width: 120px;

  /* 进度条宽度 */
  @media (min-width: 1921px) {
    min-width: 180px;
    width: 180px;
    /* 宽度大于1920px时字体大小为16px */
  }
}

::v-deep .el-progress__text {
  font-size: 14px;
  /* 进度条文本字体大小 */
}

::v-deep .left {
  background: #eff3f6;
  /* 左侧背景色 */
  text-align: right;
  /* 文本右对齐 */
  padding-right: 10px;
  /* 右内边距 */
}
</style>